<template>
  <div class="home">
    <div class="home_center">
      <el-col :span="20">
        <el-input v-model="url" placeholder="请输入需要代理的地址"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="start">确定</el-button>
      </el-col>
      <p>代理为 http://localhost:3000/</p>
    </div>
  </div>
</template>

<script>
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
export default {
  name: "",

  data() {
    return {
      url: ""
    };
  },

  methods: {
    start() {
      // console.log(this.url);
      app.use(
        "/",
        proxy({
          // 代理跨域目标接口
          target: this.url,
          changeOrigin: true,
          // 修改响应头信息，实现跨域并允许带cookie
          onProxyRes: function(proxyRes, req, res) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Credentials", "true");
          },

          // 修改响应信息中的cookie域名
          cookieDomainRewrite: false // 可以为false，表示不修改
        })
      );

      app.listen(3000);
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  padding: 15px;
  .el-button {
    margin: 0 15px;
  }
  p {
    line-height: 40px;
    color: #fff;
  }
  .home_center {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 44, 52,.5);
    padding: 15px;
    /deep/ .el-input__inner {
      background: transparent;
      color: #fff;
    }
    input {
      background: transparent;
    }
  }
}
</style>
